<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动态创建无序列表</title>
  </head>
  <body>
    <h2>动态创建无序列表</h2>
    <label>请输入你想创建列表项时的内容：<input type="text" id="content" /></label>
    <input type="button" value="开始添加" id="btn" />
    <ul id="box"></ul>
    <script>
      //获取元素
      var ulBox = document.getElementById("box");
      var input = document.getElementById("content");
      var btn = document.getElementById("btn");
      //为按钮绑定事件
      btn.onclick = function () {
        //获取input输入值
        var text = input.value;
        //创建li元素
        var li = document.createElement("li");
        //向创建的li元素添加输入的文本内容
        li.innerText = text;
        //将li元素添加到ul中
        ulBox.appendChild(li);
        //input输入内容置空，以便下次输入
        input.value = "";
      };
    </script>
  </body>
</html>
